<template>
    <div class="container">
        <div class="head">
            <span class="icon"><van-icon name="home-o"/></span>
            <span class="text">在线投票系统</span>
            <span class="auth">登录</span>
        </div>
        <div class="step">
            <van-steps :active="active">
                <van-step>登录</van-step>
                <van-step>报名</van-step>
                <van-step>投票</van-step>
                <van-step>排行</van-step>
            </van-steps>
        </div>

        <Form :model="form" :rules="rules" ref="ruleForm" :hide-required-asterisk="true">
            <div class="login" >
                <div class="el-input">
                    <FormItem prop="account">
                        <Input type="text" placeholder="手机号" required  v-model="form.account" />
                    </FormItem>

                </div>
                <div class="el-input">
                    <FormItem prop="password">
                        <Input type="password" placeholder="密码" required v-model="form.password" />
                    </FormItem>
                </div>

                    <FormItem>
                     <Button type="primary" class="box-shadow-blue btn-transition el-button"  @click="submitForm('ruleForm')">登录</Button>
                    </FormItem>

            </div>
        </Form>
        <div class="notice">
            <van-panel title="温馨提示" icon="like">
                <van-row>
                    <van-col span="20" offset="1">1. 请使用德惟一App 账号登录</van-col>
                    <van-col span="22" offset="1">2. 每个用户在每个投票类别中只能投票1次</van-col>
                </van-row>
            </van-panel>
        </div>
        <div class="loading">
            <van-loading color="#1989fa" v-show="isLoading"/>
        </div>

    </div>
</template>

<script>
    import {
        Tag,
        Step,
        Steps,
        Button,
        Icon,
        Loading,
        Panel,
        Row, Col
    } from 'vant';

    export default {
        components: {
            [Tag.name]: Tag,
            [Step.name]: Step,
            [Steps.name]: Steps,
            [Icon.name]: Icon,
            [Button.name]: Button,
            [Loading.name]: Loading,
            [Panel.name]: Panel,
            [Row.name]: Row,
            [Col.name]: Col,
        },
        name: "login",
        data() {
            const validatePhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                } else if (!/^1[3456789]\d{9}$/.test(value)) {
                    callback('手机号格式不正确');
                } else {
                    callback();
                }
            };
            return {
                isLoading: false,
                form: {
                    account: '',
                    password: ''
                },
                showPsd: true,
                rules: {
                    account: [
                        {validator:validatePhone},
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {min: 11, max: 11, message: '长度为 11个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ]
                },
                active: 0
            };
        },
        mounted() {
            console.log(this.$md5('123456kzl'))
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        this.isLoading = true
                        try {
                            let {message, code} = await this.$api.post('/account/login', {
                                account: this.form.account,
                                password: this.$md5(this.form.password)
                            })
                            if (code === 1 && message === 'ok') {
                                this.$router.push({
                                    path: '/home',
                                    query: {type: this.$route.query.type}
                                })
                            } else {
                                this.$Message.error(message)
                            }

                        } catch (e) {
                            console.log(e)
                            this.$Message.error(e.toString())
                        } finally {
                            this.isLoading = false
                        }
                    } else {
                        this.$Message.error('请完善表单')
                        return false
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .container {
        position: relative;
    }
    .loading {
        position: absolute;
        top: 17.2rem;
        left: 11rem;

    }
    .head {
        background: linear-gradient(to right, #d177eb, #9776e6, #506de0);
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        // width: 23.4375rem;
        width: 100%;
        height: 3.25rem;

        span {
            height: 1.375rem;
            color: #e9e9e9;
        }

        .icon {
            width: 1.25rem;
            font-size: 1.375rem;
        }

        .text {
            width: 6rem;
        }

        .auth {
            width: 2rem;
        }
    }

    .step {
        height: 5rem;
        padding: 1.0625rem 1.25rem 0.3125rem 1.25rem; // 17 20 20 5
        box-shadow: 0px 3px 10px 0px #ececec;
        box-sizing: border-box;
        font-size: 1.3rem;

        .van-step {
            font-size: 1.3rem;
        }
    }

    .login {
        margin-top: 1.25rem;
        height: 14.125rem;
        background-color: #fffdef;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;

        input {
            -webkit-appearance: none;
            background-color: #FFFFFF;
            background-image: none;
            border-radius: 4px;
            border: 2px solid #7874e6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 2.5rem;
            line-height: 2.5rem;
            outline: none;
            padding: 0 0px;
            -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
            width: 100%;
        }
        .el-input {
            input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
                color: #999;
                font-size: 1rem;
            }
            width: 21rem;
            height: 4.5rem;
            ::v-deep .ivu-input {
                height: 3rem;
            }

        }

        .box-shadow-blue {
            -webkit-box-shadow: 2px 4px 8px 0 #56a7e0;
            box-shadow: 2px 4px 8px 0 #56a7e0;
        }

        .btn-transition {
            background-image: -webkit-gradient(linear, left top, left bottom, from(#65cdf4), to(#46a4f5));
            background-image: linear-gradient(#65cdf4, #46a4f5);
            background-size: auto 200%;
            background-position: 0 100%;
            -webkit-transition: background-position 1s;
            transition: background-position 1s;
        }

        button {
            width: 21rem;
            height: 2.5rem;
        }

        .el-button {
            display: inline-block;
            white-space: nowrap;
            cursor: pointer;
            border: 1px solid #DCDFE6;
            color: #fffdef;
            font-size: 1.2rem;
            letter-spacing: 0.7rem;
            -webkit-appearance: none;
            text-align: center;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            outline: none;
            margin: 0;
            -webkit-transition: .1s;
            transition: .1s;
            font-weight: 500;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            padding: 0;
            border-radius: 20px;
        }
    }

    .notice {
        display: flex;
        background-color: #fffdef;
        margin: 1.5rem auto;
        border: 1px solid #a8b850;
        width: 21rem; // 336
        height: 7.8rem;
        color: #666;
        font-size: 1rem;
        box-shadow: 2px 4px 8px 0 #4ecae0;
    }
</style>
